<script lang="ts" setup>
// @ts-ignore
import image1 from '@/assets/theme/1.png'
// @ts-ignore
import image2 from '@/assets/theme/2.png'
// @ts-ignore
import image3 from '@/assets/theme/3.png'
// @ts-ignore
import image4 from '@/assets/theme/4.png'
// @ts-ignore
import image5 from '@/assets/theme/5.png'
// @ts-ignore
import image6 from '@/assets/theme/6.png'
// @ts-ignore
import image7 from '@/assets/theme/7.png'
// @ts-ignore
import image8 from '@/assets/theme/8.png'

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'page-template-default page page-child theme-nuxt'
    }
})
</script>
<template>
    <NuxtLayout name="common">
        <template v-slot:nav>
            <Nav :title="'NUXT/星度'"/>
        </template>
        <template v-slot:header>
            <header id="masthead" class="site-header header-bg" role="banner">
                <h2 class="site-branding">NUXT/星度</h2>
            </header>
        </template>
        <template v-slot:main>
            <article class="page status-publish hentry">
                <div class="entry-content">
                    <h3 class="theme-nuxt-title">主题特点</h3>
                    <CardBox>
                        <CardItem
                                :title="'服务器端渲染'"
                                :desc="'更快的初始页面加载时间，更好的SEO，在低功率设备上具有更好性能。'"
                                :image="image1"/>
                        <CardItem
                                :title="'订阅通知'"
                                :desc="'关注微信服务号，即时获取工单进度、部署教程、开发状态等通知。'"
                                :image="image2"/>
                        <CardItem
                                :title="'更好的用户体验'"
                                :desc="'搭配了大量顺滑的动画渲染，浏览体验更好更丝滑。'"
                                :image="image3"/>
                        <CardItem
                                :title="'响应和视网膜'"
                                :desc="'一套代码适用于所有设备，支持高质量的图像和文字。'"
                                :image="image4"/>
                        <CardItem
                                :title="'模块化开发'"
                                :desc="'模块化开发允许你扩展NUXT以添加自定义功能和与第三方服务的集成。'"
                                :image="image5"/>
                        <CardItem
                                :title="'生产部署'"
                                :desc="'程序可以部署在Node服务器上，预渲染可以在静态环境中托管或部署在边缘提供商。'"
                                :image="image6"/>
                        <CardItem
                                :title="'自动化和约定'"
                                :desc="'约定一套规范的目录结构来自动化重复的任务，让开发者专注于推动功能的开发。'"
                                :image="image7"/>
                        <CardItem
                                :title="'更好的可访问性'"
                                :desc="'内容在初始页面加载时立即可用，改善了依赖屏幕阅读器的用户的可访问性。'"
                                :image="image8"/>
                    </CardBox>
                </div>
            </article>
        </template>
    </NuxtLayout>
</template>
<style scoped>
.header-bg {
    background: black url(@/assets/policy/nuxt-theme.png) no-repeat scroll center / cover;
}

body.theme-nuxt .entry-content {
    --fqxk-x: 1rem;
    --fqxk-y: 1rem;
}
.theme-nuxt-title {
    display: flex;
    width: 100%;
    justify-content: center;
}
@media (min-width: 1153px) {
    .page .site-header {
        height: calc(40vh - var(--edge-tb));
    }
}

@media (max-width: 1152px) {
    .site-header {
        height: 50vh;
    }
}
</style>
